import { h, Component } from 'preact';
import elementClass from 'element-class';
import s from './Selectbox.scss';
import Picker from '~/components/Picker';
import dataProvince from './data/province.json';
import dataCity from './data/city.json';
import dataCounty from './data/county.json';

const defaultCounty = [{ id: 0, name: '' }];

export default class Selectbox extends Component {
	constructor(props) {
		super(props);
		this.state = {
			province: '安徽',
			city:'安庆',
			county:'迎安区',
			showPicker: false,
			...this.pickerGroups()
		};
	}
	onChangePick = (key, value) => {
		console.log(value);
		this.setState(({ valueGroups }) => {
			try {
				switch (key) {
					case 'province':
						return this.pickerGroups(value);
					case 'city':
						return this.pickerGroups(valueGroups.province, value);
					default:
						return this.pickerGroups(valueGroups.province, valueGroups.city, value);
				}
			} catch (e) {
				return {};
			}
		});
	}



	onClickConfirmPick = () => {
		const { valueGroups } = this.state;
		const areas = [valueGroups.province, valueGroups.city, valueGroups.county];

		this.setState({
			province: valueGroups.province,
			city: valueGroups.city,
			county: valueGroups.county,
			showPicker: false
		});
	}

	onClickCancelPick = () => {
		this.setState({
			showPicker: false
		});
	}

	onClickShowPicker = () => {
		// console.log(this.refProvince.title);
		this.setState({
			showPicker: true
		});
	}

	findOrFirst = (target, condition) => {
		const result = (target || []).filter(condition);
		const first = target && target.length > 0 ? target[0] : null;
		return result.length > 0 ? result[0] : first;
	}

	pickerGroups = (provinceName, cityName, countyName) => {

		const provinceObj = this.findOrFirst(dataProvince, x => x.name === provinceName);
		const cityObj = this.findOrFirst(dataCity[provinceObj.id], x => x.name === cityName);
		const countyObj = this.findOrFirst(
			dataCounty[cityObj.id] || defaultCounty,
			x => x.name === countyName
		);

		return {
			optionGroups: {
				province: dataProvince.map(x => x.name),
				city: dataCity[provinceObj.id].map(x => x.name),
				county: (dataCounty[cityObj.id] || defaultCounty).map(x => x.name)
			},
			valueGroups: {
				province: provinceObj.name,
				city: cityObj.name,
				county: countyObj.name
			}
		};
	}
	renderPicker() {
		const { showPicker, optionGroups, valueGroups } = this.state;
		
		return showPicker ? (
			<Picker
				confirmText="确定"
				cancelText="取消"
				onConfirm={this.onClickConfirmPick}
				onCancel={this.onClickCancelPick}
				onChange={this.onChangePick}
				optionGroups={optionGroups}
				valueGroups={valueGroups}
			/>) : null;
	}
	render() {
		const { valueGroups } = this.state;
		const {onClickShowPicker} = this;
		return (
			<div onClick={onClickShowPicker} >
				<div className={s.rev_sel} title={this.state.province}>{this.state.province}</div>
				<div className={s.rev_sel} title={this.state.city}>{this.state.city}</div>
				<div className={s.rev_sel} title={this.state.county}>{this.state.county}</div>
				{this.renderPicker()}
			</div>
		);
	}
}